<!-- 短剧分类 -->
<template>
    <div class="user-tag">
        <div class="ls-card header">
            <!-- 搜索框 -->
            <el-form
                ref="formRef"
                :model="form"
                inline
                label-width="70px"
                size="small"
                class="m-t-20"
                @submit.native.prevent
            >
                <el-form-item label="分类名称">
                    <el-input class="ls-select-keyword" v-model="form.keyword" placeholder="请输入分类名称"></el-input>
                    <el-button class="m-l-20" size="small" type="primary" @click="getUserLabelList(1)">查询</el-button>
                    <el-button class="m-l-20" size="small" @click="onReset">重置</el-button>
                    <!-- 导出按钮 -->
                    <export-data
                        class="m-l-10"
                        :pageSize="pager.size"
                        :method="videoClassificationlist"
                        :param="form"
                    ></export-data>
                </el-form-item>
            </el-form>
        </div>

        <div class="ls-user_tag ls-card m-t-20">
            <div class="list-header">
                <el-button size="small" type="primary" @click="onUserLabelAdd">新增短剧分类</el-button>
                <ls-dialog
                    class="m-l-10 inline"
                    title="确定批量删除"
                    content="关联此分类的短剧将移除该分类，请谨慎操作。"
                    @confirm="onUserLabelDelAll"
                >
                    <el-button size="small" slot="trigger">删除</el-button>
                </ls-dialog>
            </div>
            <div class="list-table m-t-16">
                <el-table
                    :data="pager.lists"
                    style="width: 100%"
                    v-loading="pager.loading"
                    size="mini"
                    :header-cell-style="{ background: '#f5f8ff' }"
                    @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="55"> </el-table-column>
                    <el-table-column prop="category_name" label="分类名称" min-width="" width=""> </el-table-column>
                    <!-- <el-table-column prop="num" label="短剧数" min-width="" width=""> </el-table-column> -->
                    <el-table-column label="操作" min-width="">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="onUserLabelEdit(scope.row)">编辑</el-button>
                            <ls-dialog
                                class="m-l-10 inline"
                                :title="`确定删除：${scope.row.category_name}`"
                                content="关联此分类的短剧将移除该分类，请谨慎操作。"
                                @confirm="onUserLabelDel(scope.row)"
                            >
                                <el-button type="text" size="small" slot="trigger">删除</el-button>
                            </ls-dialog>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="flex row-right m-t-16 row-right">
                <ls-pagination v-model="pager" @change="getUserLabelList()" />
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { videoClassificationlist, delvideoClassification } from '@/api/visionapi/type'
import { CategoryLists_Req } from '@/api/visionapi/type.d.ts'
import { PageMode } from '@/utils/type'
import { RequestPaging } from '@/utils/util'
import LsDialog from '@/components/ls-dialog.vue'
import LsPagination from '@/components/ls-pagination.vue'
import ExportData from '@/components/export-data/index.vue'
@Component({
    components: {
        LsDialog,
        LsPagination,
        ExportData
    }
})
export default class userTag extends Vue {
    /** S Data **/
    // 分页请求
    pager: RequestPaging = new RequestPaging()
    // 查询表单
    form: CategoryLists_Req = {
        keyword: '', //分类名称
        type:3
    }
    // 被选中的
    multipleSelection = []

    videoClassificationlist = videoClassificationlist
    /** E Data **/

    /** S Methods **/
    // 重置搜索框内容
    onReset() {
        this.form.keyword = ''
        this.getUserLabelList()
    }
    // 获取短剧分类列表
    getUserLabelList(page?: number): void {
        page && (this.pager.page = page)
        // 分页请求
        this.pager
            .request({
                callback: videoClassificationlist,
                params: this.form
            })
            .catch(() => {
                this.$message.error('数据请求失败，刷新重载')
            })
    }
    // 新增短剧分类
    onUserLabelAdd() {
        this.$router.push({
            path: '/vision/categoryEdit',
            query: {
                mode: PageMode.ADD
            }
        })
    }
    // 编辑短剧分类
    onUserLabelEdit(item: any) {
        this.$router.push({
            path: '/vision/categoryEdit',
            query: {
                mode: PageMode.EDIT,
                id: item.id
            }
        })
    }

    // 删除短剧分类
    onUserLabelDel(item: any) {
        delvideoClassification({
            ids: [item.id]
        })
            .then(() => {
                this.getUserLabelList()
                this.$message.success('删除成功!')
            })
            .catch(() => {
                //this.$message.error("删除失败")
            })
    }
    // 批量删除
    onUserLabelDelAll() {
        let idArray: Array<Object> = []
        if (this.multipleSelection.length <= 0) {
            this.$message.error('请选择要删除的分类!')
            return
        }
        this.multipleSelection.forEach((item: any) => {
            idArray = [...idArray, item.id]
        })
        delvideoClassification({
            ids: idArray
        })
            .then(() => {
                this.getUserLabelList()
                this.$message.success('删除成功!')
            })
            .catch(() => {
                //this.$message.error("删除失败")
            })
    }
    // 导出短剧分类
    onExportUserLabel() {}
    handleSelectionChange(val: any) {
        this.multipleSelection = val
    }
    getRowKeys(row: any) {
        return row.id
    }
    /** E Methods **/
    /** S Life Cycle **/
    created() {
        this.getUserLabelList()
    }
    /** E Life Cycle **/
}
</script>
